<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // 需求: 描述一只猫的名字 颜色  种族  叫声 技能

    // 面向过程:
    var name = "Tom";
    var color = "black";
    var species = "Cat";

    function call() {
        console.log("喵喵!");
    }

    function skill() {
        console.log("捉老鼠!");
    }

    // 面向对象 -> 将需求抽象为一个对象, 然后针对这个对象分析其特征(属性)与行为

    // 最简单面向对象 -> 字面量对象 -> 把面向过程中的 变量和方法 整合到对象中 作为对象的属性和方法
    // 缺点: 一个对象只能描述一只猫  => 创建麻烦
    // var Tom = {
    //     name: "Tom",  //特性(属性)
    //     color: "black",
    //     species: "Cat",
    //     call: function () { // 行为(方法)
    //         console.log("喵喵!");
    //     },
    //     skill: function () {
    //         console.log("捉老鼠!");
    //     }
    // }

    // var Kitty = {
    //     name: "kitty",  //特性(属性)
    //     color: "pink",
    //     species: "Cat",
    //     call: function () { // 行为(方法)
    //         console.log("喵喵!");
    //     },
    //     skill: function () {
    //         console.log("捉老鼠!");
    //     }
    // }

    // var DuoLa = {
    //     name: "DuoLa",  //特性(属性)
    //     color: "skyblue",
    //     species: "Cat",
    //     call: function () { // 行为(方法)
    //         console.log("喵喵!");
    //     },
    //     skill: function () {
    //         console.log("捉老鼠!");
    //     }
    // }


    // console.log(Tom);
    // console.log(Kitty);
    // console.log(DuoLa);


    // 封装函数
    // 优点 -> 可以根据传入的参数快捷创建对象

    // 缺点:
    // 1. 通过函数创建的对象和函数没有关系(简单来说不是构造函数创建)
    // var arr = [1, 2, 3];  // new Array()
    // var obj = { a: 1, b: 2 };// new Object()

    // console.log(arr instanceof Array); // true
    // console.log(obj instanceof Object); // true

    // 2. 公有属性和方法重复创建 => 占内存



    function cat(name, color) {
        var obj = { // 字面量对象 -> Object创建
            name: name,
            color: color,
            species: "Cat",
            call: function () { // 行为(方法)
                console.log("喵喵!");
            },
            skill: function () {
                console.log("捉老鼠!");
            }
        }
        return obj;
    }

    var Tom = cat("Tom", "black");
    console.log(Tom);
    var Kitty = cat("Kitty", "pink");
    console.log(Kitty);

    console.log(Tom instanceof cat, Kitty instanceof cat);
    console.log(Tom instanceof Object, Kitty instanceof Object);






</script>

</html>